<template>
  <div class="container">
    <el-card class="left-card" style="height: 100%;width: 450px;min-height: 750px">
        <el-form label-width="80px" style="height: 100%;" label-position="top">
          <el-form-item label="绘画内容输入"  style="height: 40%; ">
            <el-input v-model="text" type="textarea" rows="4" placeholder="写下你的创意" ></el-input>
          </el-form-item>
          <el-form-item label="选择绘画风格" style="height: 40%;width: 100%;">
            <el-select  v-model="style" filterable  placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-card >
            <el-form-item label="选择绘画比例" label-position="top">
              <div style="display: flex;align-items: center;justify-content: space-around; height: 40%;">
                <el-button
                    :class="{ 'active': resolution === '640*360' }"
                    @click="updateRes('640*360')">▭横图</el-button>
                <el-button
                    :class="{ 'active': resolution === '512*512' }"
                    @click="updateRes('512*512')">▢方图</el-button>
                <el-button
                    :class="{ 'active': resolution === '360*640' }"
                    @click="updateRes('360*640')">▯竖图</el-button>
              </div>
            </el-form-item>
          </el-card>
          <el-button type="primary" style="margin-top: 35px" @click="DrawPicture">立刻生成</el-button>
        </el-form>
    </el-card>
    <el-card class="right-card" style="height: 100%; padding-left: 10px;width:1200px;min-height: 750px " v-loading="loading">
        <h4>图片显示区：</h4>
      <img v-if="this.image" :src="this.image" alt="" style="margin-left: 100px;">
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      resolution: '',
      image:'',
      text: '',
      style: '',
      options: [{
        value: '二次元',
        label: '二次元'
      },
        {
          value: '写实风格',
          label: '写实风格'
        },
        {
          value: '古风',
          label: '古风'
        },
        {
          value: '赛博朋克',
          label: '赛博朋克'
        },
        {
          value: '水彩画',
          label: '水彩画'
        },
        {
          value: '油画',
          label: '油画'
        },
        {
          value: '卡通画',
          label: '卡通画'
        },
      ]
    }
  },
  name: "AIDraw",
  methods: {
    updateRes(res) {
      // 如果点击的按钮与当前选中的一致，则取消选中（可选，根据需求决定是否需要此逻辑）

        this.resolution = res; // 更新选中的分辨率

    },
    DrawPicture() {
      this.loading=true
      this.$request({
        url: '/ai/AiDraw',
        method: 'post',
        data: {
          text: this.text,
          resolution: this.resolution,
          style: this.style,
        }
      }).then((res)=>{
        if (res && res.code === 200) {
          this.loading=false
          this.image=res.data
      }
      })
    }
  }
}
</script>

<style scoped>
.active {
  /* 添加你希望的选中样式，比如改变背景色或边框 */
  background-color: #ecf5ff; /* 示例：改变背景色 */
  border-color: #c6e2ff; /* 示例：改变边框颜色 */
  color: #409EFF;
}
.container {
  display: flex;
  width: 100%;
}

.left-card,
.right-card {
  margin: 0 10px; /* 控制卡片之间的间距 */
}

/* 确保表单整体充满卡片，并给表单项分配高度 */
.el-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 调整输入框所在的表单项高度 */
.el-form-item {
  flex-grow: 1; /* 自动填充剩余空间 */
}


</style>
